<template>
  <b-row
    cols="2"
    class="product-card"
    align-v="center"
    :class="{ reverse: reverse }"
  >
    <b-col cols="7">
      <div class="app">
        <b-img :src="icon" fluid width="98" height="98"></b-img>
        <h1>{{ appName }}</h1>
      </div>
      <div v-html="html" class="html"></div>
    </b-col>

    <b-col cols="5">
      <b-img
        :src="require(`~/static/img/${appImg}`)"
        fluid
        :width="appImgW"
        :height="appImgH"
      ></b-img>
    </b-col>
  </b-row>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: require(`~/static/img/icon_cpzx_sx_hzlogo.png`)
    },
    appName: {
      type: String,
      default: "肾行-APP"
    },
    html: {
      type: String,
      default: `<p>
        专注于慢性肾脏病的全病程管理，为慢性肾脏病、尿毒症、等待移植及肾移植术后患者提供自我管理、科普学习及病情随访服务。通过记录日常生命体征、用药情况、检查检验结果等，与自己选择的专业医生在线沟通，时刻了解并管理好自己的肾脏健康。
      </p>
      <p>
        肾行app还提供了丰富的科普文章、医师课程、社区问答互动、直播义诊的功能，为患者互通互助搭建桥梁，增加医学知识，提高健康意识，与医生共同管理好自己的身体。
      </p>`
    },
    appImg: {
      type: String,
      default: "icon_cpzx_sx_hzsj.png"
    },
    appImgW: {
      type: String,
      default: "279px"
    },
    appImgH: {
      type: String,
      default: "569px"
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.product-card {
  padding: 144px 0 58px 0;
  &.reverse {
    flex-direction: row-reverse;
  }
  .app {
    display: flex;
    align-items: center;
    margin-bottom: 46px;
    h1 {
      margin-left: 46px;
    }
  }

  & > div {
    .html {
      font-size: 24px;
      text-indent: 40px;
      line-height: 33px;
      color: #666;
    }

    &:last-child {
      text-align: right;
    }
  }
}
</style>
